<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    class="operationModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        :form="form"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-form-item label="车牌号">
          <a-input
            placeholder="请输入车牌号"
            v-decorator="['plateNo', { rules: [{ type: 'string', required: true, message: '请输入车牌号!' }] }]"
          />
        </a-form-item>
        <a-form-item label="有效期">
          <a-radio-group
            v-model="isForever"
            @change="isForeverChange"
          >
            <a-radio :value="1">永久期限</a-radio>
            <a-radio :value="0">自定义时间</a-radio>
          </a-radio-group>
        </a-form-item>
        <div v-show="!isForever">
          <a-form-item
            label="指定日期"
            class="dateBox"
          >
            <a-checkbox
              @change="isDateChecked = !isDateChecked"
              :checked="isDateChecked"
            ></a-checkbox>
            <a-button
              :disabled="!isDateChecked"
              v-for="(item,index) in fastDate"
              :key="item"
              @click="fastDateClick(index)"
            >{{ item }}</a-button>
          </a-form-item>
          <a-row>
            <a-col
              :xs="{ offset: 24 }"
              :sm="{ offset: 5 }"
            >
              <a-row>
                <a-col :span="12">
                  <a-form-item label="开始日期">
                    <a-date-picker
                      format="YYYY-MM-DD"
                      :disabled="!isDateChecked"
                      v-model="startDate"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="结束日期">
                    <a-date-picker
                      format="YYYY-MM-DD"
                      :disabled="!isDateChecked"
                      v-model="endDate"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>

        </div>

        <a-form-item label="车主姓名">
          <a-input
            placeholder="请输入车主姓名"
            v-decorator="[
              'userName',
              {
                rules: [
                  { type: 'string'},
                  { max: 40, message: '车主姓名长度不要超过40个字符' },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="车主手机号码">
          <a-input
            placeholder="请输入车主手机号码"
            v-decorator="[
              'mobile',
              { rules: [{ validator: this.validateMobile }] },
            ]"
          />
        </a-form-item>

        <a-form-item label="家庭住址">
          <a-input
            placeholder="请输入家庭住址"
            v-decorator="['address', { rules: [{ max: 100, message: '家庭住址长度不要超过100个字符' }] }]"
          />
        </a-form-item>

        <a-form-item label="车辆备注">
          <a-input
            placeholder="请输入车辆备注"
            v-decorator="['remark', { rules: [{ max: 100, message: '车辆备注长度不要超过100个字符' }] }]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'ParkWhiteListModal',
  data() {
    return {
      isForever: 0,
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      initialWeekday: [], //星期名称默认选择的值
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        add: '/whitelist/parkWhiteList/add',
        edit: '/whitelist/parkWhiteList/edit',
        queryParkList: '/whitelist/parkWhiteList/queryParkList',
        parkCarTypeList: '/ConfigCarType/configCarType/parkCarTypeList',
      },
      isDateChecked: false, //标记是否勾选了指定日期
      isTimeChecked: false, //标记是否勾选了指定时间
      isWeekdayChecked: false, //标记是否勾选了指定周日
      startDate: '', //开始日期
      endDate: '', //结束日期
      fastDate: ['一个月', '三个月', '六个月', '一年', '三年'],
    }
  },
  mounted() {},
  methods: {
    moment,
    endTimeChange(value,e){
      var that = this,
          startTime = this.form.getFieldValue('startTime').format('HH:mm:ss').replace(/:/g,''),
          endTime = e.replace(/:/g,'')
      if(startTime>endTime){
        alert('开始时间需小于结束时间！');
        this.$nextTick(()=>{
          that.form.setFieldsValue({endTime:''})
        })
      }
    },
    isForeverChange(e) {
      this.isForever = e.target.value
    },
    add() {
      this.edit({ isForever: 1, licenseType: 1, status: 'Y' })
    },
    edit(record) {
      console.log(record)
      this.isForever = record.isForever
      ;(this.isDateChecked = false), (this.isTimeChecked = false), (this.isWeekdayChecked = false)
      this.startDate = ''
      this.endDate = ''
      this.visible = true
      this.confirmLoading = true
      this.form.resetFields()

      this.model = Object.assign({}, record)
      if (!record.isForever) {
        if (record.startDate) {
          this.isDateChecked = true
          this.startDate = moment(record.startDate)
          this.endDate = moment(record.endDate)
        }
        if (record.startTime) {
          this.isTimeChecked = true
          this.model.startTime = moment(this.model.startTime, 'HH:mm:ss')
          this.model.endTime = moment(this.model.endTime, 'HH:mm:ss')
        }
        console.log(this.model.startTime)
        if (record.weekDay && record.weekDay.length) {
          this.isWeekdayChecked = true
        }
      }
      if (typeof this.model.weekDay === 'string') {
        this.model.weekDay = this.model.weekDay.split('、')
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.model, 'plateNo', 'userName', 'mobile', 'address', 'remark', 'weekDay', 'startTime', 'endTime')
        )
        this.confirmLoading = false
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign({}, this.model, values)
          if (this.isForever === 1) {
            delete formData.weekDay
            delete formData.startDate
            delete formData.endDate
            delete formData.startTime
            delete formData.endTime
            formData.isForever = 1
          } else {
            formData.isForever = 0
            if (this.isTimeChecked || this.isDateChecked || this.isWeekdayChecked) {
              if (this.isDateChecked) {
                if (this.startDate) {
                  formData.startDate = this.startDate.format('YYYY-MM-DD')
                } else {
                  this.$message.warning('请设置开始日期')
                  return
                }
                if (this.endDate) {
                  formData.endDate = this.endDate.format('YYYY-MM-DD')
                } else {
                  this.$message.warning('请设置结束日期')
                  return
                }
              } else {
                delete formData.startDate
                delete formData.endDate
              }
              if (this.isTimeChecked) {
                if (formData.startTime) {
                  formData.startTime = formData.startTime.format('HH:mm:ss')
                } else {
                  this.$message.warning('请设置开始时间')
                  return
                }
                if (formData.endTime) {
                  formData.endTime = formData.endTime.format('HH:mm:ss')
                } else {
                  this.$message.warning('请设置结束时间')
                  return
                }
              } else {
                delete formData.startTime
                delete formData.endTime
              }
              if (this.isWeekdayChecked) {
                if (values.weekDay && values.weekDay.length) {
                  formData.weekDay = values.weekDay.join('、')
                }else{
                  this.$message.warning('请指定周日')
                  return;
                }
              } else {
                delete formData.weekDay
              }
            } else {
              this.$message.warning('请指定日期、时间、周日三者中的一个或多个')
              return;
            }
          }
          formData.updateTime = moment().format('YYYY-MM-DD HH:mm:ss')
          this.confirmLoading = true
          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback()
      } else {
        callback('手机号码格式不正确!')
      }
    },
    fastDateClick(index) {
      console.log(index)
      let now = this.moment()
      let endDate = this.moment()
      switch (index) {
        case 0:
          endDate.add(1, 'months')
          break
        case 1:
          endDate.add(3, 'months')
          break
        case 2:
          endDate.add(6, 'months')
          break
        case 3:
          endDate.add(1, 'years')
          break
        case 4:
          endDate.add(3, 'years')
          break
      }

      this.startDate = now
      this.endDate = endDate
    },
  },
  watch: {
    isDateChecked(newValue) {
      if (!newValue) {
        this.startDate = ''
        this.endDate = ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
.dateBox .ant-btn {
  margin-left: 20px;
}
</style>
